<template>
  <div id="ov">
    <bread list='商品管理'
           details='参数列表'></bread>
    <el-card>
      <el-alert title="注意：只允许为第三级分类设置相关参数！"
                type="warning"
                effect="dark"
                show-icon>
      </el-alert>
      <!-- 级联选择器 -->
      选择商品分类:
      <el-cascader v-model="value"
                   :options="options"
                   :props="{ expandTrigger: 'hover',label:'cat_name',value:'cat_id' }"
                   @change="handleChange"
                   style="margin-top:20px;margin-bottom:20px;"></el-cascader>
      <!-- tabs切换 -->
      <el-tabs type="border-card"
               @tab-click='handleClick'
               v-model="editableTabsValue">
        <el-tab-pane name="many"
                     label="动态参数">
          <!-- 添加属性按钮 -->
          <el-button type="primary"
                     :disabled='disabled'>添加参数</el-button>
          <!-- 表格 -->
          <el-table :data="tableData"
                    @expand-change='expandChange'
                    border
                    style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <!-- 添加数据 -->
                <el-tag :key="index"
                        v-for="(tag,index) in scope.row.attr_vals.split(',').filter(item => item !== '')"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag,scope.row)">
                  {{tag}}
                </el-tag>
                {{scope.row.inputValue}}==
                <el-input class="input-new-tag"
                          v-if="scope.row.InputVisible"
                          v-model="scope.row.inputValue"
                          ref="saveTagInput"
                          size="small"
                          @keyup.enter.native="handleInputConfirm(scope.row)"
                          @blur="handleInputConfirm(scope.row)">
                </el-input>

                <el-button v-else
                           class="button-new-tag"
                           size="small"
                           @click="showInput(scope.row)">+ New Tag</el-button>
                <!-- 添加数据 -->

              </template>
            </el-table-column>
            <el-table-column label="#"
                             type="index">
            </el-table-column>
            <el-table-column label="参数名称"
                             prop="attr_name">
            </el-table-column>
            <el-table-column label="操作">
              <el-button type="primary"
                         size="mini"
                         icon="el-icon-edit">修改</el-button>

              <el-button type="danger"
                         size="mini"
                         icon="el-icon-delete">删除</el-button>

            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="only"
                     label="静态属性">
          <!-- 添加属性按钮 -->
          <el-button type="primary"
                     :disabled='disabled'>添加属性</el-button>
          <!-- 表格 -->
          <el-table :data="tableData"
                    border
                    style="width: 100%">
            <el-table-column type="expand">
              <template>
                123
              </template>
            </el-table-column>
            <el-table-column label="#"
                             type="index">
            </el-table-column>
            <el-table-column label="参数名称"
                             prop="attr_name">
            </el-table-column>
            <el-table-column label="操作">
              <el-button type="primary"
                         size="mini"
                         icon="el-icon-edit">修改</el-button>

              <el-button type="danger"
                         size="mini"
                         icon="el-icon-delete">删除</el-button>

            </el-table-column>
          </el-table>

        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { goodsParamsApi, goodsParamsLayerApi, goodsAddApi } from '../../api'
export default {
  props: {},
  data () {
    return {
      editableTabsValue: 'many',
      disabled: true,
      // 级联选择器
      value: [],
      options: [],
      // 表格数据
      tableData: [],
      // 添加属性数据
      dynamicTags: []
    }
  },
  methods: {
    // 表格行展开关闭时触发
    expandChange (row, expanded) {
      if (expanded.length === 0) {

      } else {
        row.attr_vals = row.attr_vals.split(',').filter(item => item !== '').join(',')
        console.log(row.attr_vals)
      }
    },
    // 级联选择器 值变换触发
    async handleChange (value) {
      if (value.length === 3) {
        this.disabled = false
        // 获取分类参数管理
        const res = await goodsParamsLayerApi(value[value.length - 1], this.editableTabsValue)
        res.data.data.forEach(item => { item.InputVisible = false; item.inputValue = '' })
        this.tableData = res.data.data
      } else {
        this.tableData = []
        this.disabled = true
      }
    },
    // 点击tab触发
    async handleClick (tab) {
      if (this.value.length === 3) {
        this.disabled = false
        // 获取分类参数管理
        const res = await goodsParamsLayerApi(this.value[this.value.length - 1], tab.name)
        this.tableData = res.data.data
      }
    },
    // 获取商品分类
    async getCategories () {
      const res = await goodsParamsApi()
      this.options = res.data.data
    },
    // 添加属性方法
    // 点击删除图标时触发
    handleClose (tag, row) {
      row.attr_vals.split(',').splice(row.attr_vals.split(',').indexOf(tag), 1)
      goodsAddApi(row, this.editableTabsValue, row.attr_vals)
    },

    showInput (row) {
      // this.InputVisible = true
      row.InputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 添加属性
    handleInputConfirm (row) {
      const inputValue = row.inputValue
      if (inputValue.trim()) {
        row.attr_vals.split(',').push(inputValue)
        goodsAddApi(row, this.editableTabsValue, row.attr_vals)
      }
      row.InputVisible = false
      row.inputValue = ''
    }
  },
  created () {
    this.getCategories()
  }
}
</script>

<style scoped lang='less'>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
